﻿<template id="vModal">
    <style>
        .modal {
            transition: all 0.3s ease;
        }
        .modal.in {
            background-color: rgba(0,0,0,0.5);
        }
        .modal.zoom .modal-dialog {
            -webkit-transform: scale(0.1);
            -moz-transform: scale(0.1);
            -ms-transform: scale(0.1);
            transform: scale(0.1);
            top: 300px;
            opacity: 0;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
        }
        .modal.zoom.in .modal-dialog {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -webkit-transform: translate3d(0, -300px, 0);
            transform: translate3d(0, -300px, 0);
            opacity: 1;
        }
    </style>
    <div role="dialog" v-bind:class="{'modal':true,'fade':effect === 'fade','zoom':effect === 'zoom'}">
        <div v-bind:class="{'modal-dialog':true,'modal-lg':large,'modal-sm':small}" role="document"
             v-bind:style="{width: optionalWidth}">
            <div class="modal-content">
                <slot name="modal-header">
                    <div class="modal-header">
                        <button type="button" class="close" v-bind:click="close"><span>&times;</span></button>
                        <h4 class="modal-title">
                            <slot name="title">
                                {{title}}
                            </slot>
                        </h4>
                    </div>
                </slot>
                <slot name="modal-body">
                    <div class="modal-body"></div>
                </slot>
                <slot name="modal-footer">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" v-bind:click="close">{{ cancelText }}</button>
                        <button type="button" class="btn btn-primary" v-bind:click="callback">{{ okText }}</button>
                    </div>
                </slot>
            </div>
        </div>
    </div>
</template>
